<template>
    <view class="page">
        <view class="top_box">
            <back :title="'成为城市合伙人'" :isBack="true" :isBg="false"></back>
            <view class="yzbicon_box">
                <image src="https://build.lwjcg.com/uploads/waste.png" mode="scaleToFill" />
            </view>
        </view>
        <view class="srk_box" v-if="!autoCommit">
            <view class="lianxiren_box">
                <view class="left_box">姓名</view>
                <view class="right_box">
                    <input type="text" :value="real_name" @blur="realBlur" placeholder="请输入"
                        placeholder-class="lxr_color">
                </view>
                <view class="icon">
                    <u-icon name="arrow-right" color="rgba(199, 199, 199, 1)" size="24"></u-icon>
                </view>
            </view>
            <view style="width: 628rpx;height: 2rpx;margin:auto; background: rgba(240, 240, 240, 1);"></view>
            <view class="lianxiren_box">
                <view class="left_box">手机号码</view>
                <view class="right_box">
                    <input type="number" :value="phone" @blur="phoneBlur" placeholder="请输入"
                        placeholder-class="lxr_color">
                </view>
                <view class="icon">
                    <u-icon name="arrow-right" color="rgba(199, 199, 199, 1)" size="24"></u-icon>
                </view>
            </view>
            <view style="width: 628rpx;height: 2rpx;margin:auto; background: rgba(240, 240, 240, 1);"></view>
            <view class="lianxiren_box" @click="cityBtn">
                <view class="left_box">申请城市</view>
                <view class="right_box">
                    <input v-if="city == ''" type="text" :value="city" placeholder="请选择省市区"
                        placeholder-class="lxr_color">
                    <text v-else>
                        {{ city }}
                    </text>
                </view>
                <view class="icon">
                    <u-icon name="arrow-right" color="rgba(199, 199, 199, 1)" size="24"></u-icon>
                </view>
            </view>


        </view>
        <template v-if="!autoCommit">
            <view class="tishiwenzi_box">提交申请后您将无法继续申请，平台会在3个工作日与您联系，请保持手机通畅</view>
            <view class="tijiao_box" @click="$noMultipleClicks(submit)">提交申请</view>
            <!-- <view class="xieyi_box">
                <view class="icon_box" @click="agrBtn">
                    <image v-if="xieyiSta" src="https://rubbish.lwjcg.com/static/index/ty.png" mode="scaleToFill" />
                    <image v-else src="https://rubbish.lwjcg.com/static/index/ySel.png" mode="scaleToFill" />
                </view>
                提交及接受<text style="color: rgba(59, 217, 148, 1);">《勘察员协议》</text>
            </view> -->
        </template>




        <template v-else>
            <view class="tijiao_text_box">
                <view class="dengdai_icon">
                    <image src="https://rubbish.lwjcg.com/static/index/sl.png" mode="scaleToFill" />
                </view>
                <view class="sqz_text">审核中</view>
                <view class="sm_text_box">平台会在3个工作日与您联系，请保持手机通畅</view>
            </view>


            <view class="fanhui_box" @click="gosyc">返回</view>
        </template>
        <u-picker v-model="reginshow" mode="region" :default-region="defaultRegion" @confirm="regionEnt"></u-picker>

        <!-- <u-picker mode="multiSelector" v-model="show" :default-selector='[0, 1]' :range="multiSelector"></u-picker> -->
    </view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy
    },
    data() {
        return {

            noClick: true,//防连点
            // xieyiSta: false,//协议
            autoCommit: false,// 是否提交
            real_name: '',//姓名
            phone: '',//电话
            city: '',
            reginshow: false,
            defaultRegion: ['陕西省', '西安市', '雁塔区'],
            show: false,
            multiSelector: [
                [1, 2, 3],
                [4, 5, 6],
                [4, 5, 6],
            ],
            province_id: '',
            city_id: '',
            county_id: '',
        }
    },
    onLoad(options) {
        this.autoCommit = options.autoCommit
    },
    onShow() {
    },
    methods: {
        // agrBtn() {
        //     this.xieyiSta = !this.xieyiSta
        // },
        cityBtn() {
            this.reginshow = true
            // this.show = true
        },
        getregion() {
        },
        regionEnt(e) {
            console.log(e)
            this.city = e.province.label + '-' + e.city.label + '-' + e.area.label
            this.province_id = e.province.value + '0000'
            this.city_id = e.city.value + '00'
            this.county_id = e.area.value
        },
        gosyc() {
            uni.navigateBack()
        },
        phoneBlur(e) {
            this.phone = e.detail.value
        },
        realBlur(e) {
            this.real_name = e.detail.value
        },
        submit() {
            if (this.real_name == '') {
                uni.showToast({
                    title: '请输入姓名',
                    icon: 'none'
                })
            } else if (this.phone == '') {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                })
            }else if(this.city == ''){
                uni.showToast({
                    title: '请选择省市区',
                    icon: 'none'
                })
            } else {
                let data = {
                    real_name: this.real_name,
                    phone: this.phone,
                    province_id: this.province_id,
                    city_id: this.city_id,
                    county_id: this.county_id,
                }

                this.$Request.post(this.$api.user.partnerApply, data).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: '提交成功',
                            icon: 'none'
                        })
                    } else if (res.code == 400) {
                        uni.showToast({
                            title: '提交成功',
                            icon: 'none'
                        })
                        this.autoCommit = true
                    }
                    console.log(res)
                })



                // this.$Request.post(this.$api.word.surveyApply, data).then(res => {
                //     if (res.code == 200) {
                //         uni.showToast({
                //             title: '提交成功',
                //             icon: 'none'
                //         })
                //     } else if (res.code == 400) {
                //         uni.showToast({
                //             title: '提交成功',
                //             icon: 'none'
                //         })
                //         this.autoCommit = true
                //     }
                //     console.log(res)
                // })
            }

        }
    }
}
</script>
<style lang="scss">
.lxr_color {
    font-weight: 400;
    color: rgba(199, 199, 199, 1);
}

.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(245, 245, 245, 1);

    .top_box {
        width: 750rpx;
        height: 730rpx;
        opacity: 1;
        position: relative;
        background: linear-gradient(180deg, rgba(226, 244, 243, 1) 0%, rgba(226, 244, 243, 0) 100%);
        margin-bottom: 100rpx;

        .yzbicon_box {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 596rpx;
            height: 476rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }


    }

    .tijiao_text_box {
        width: 704rpx;
        height: 262rpx;
        border-radius: 28rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        box-sizing: border-box;
        padding-top: 18rpx;
        margin-bottom: 134rpx;

        .dengdai_icon {
            width: 58rpx;
            height: 62rpx;
            margin: auto;
            margin-bottom: 20rpx;

            image {
                width: 100%;
                height: 100%;
            }

        }

        .sqz_text {
            text-align: center;
            width: 100%;
            height: 46rpx;
            font-size: 32rpx;
            font-weight: 700;
            line-height: 46rpx;
            color: rgba(51, 51, 51, 1);
            margin-bottom: 20rpx;
        }

        .sm_text_box {
            width: 100%;
            height: 68rpx;
            font-size: 26rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 68rpx;
            color: rgba(128, 128, 128, 1);
            text-align: center;

        }
    }

    .fanhui_box {
        width: 652rpx;
        height: 100rpx;
        border-radius: 14rpx;
        text-align: center;
        line-height: 100rpx;
        border: 2rpx solid rgba(26, 194, 121, 1);
        margin: auto;
        font-size: 36rpx;
        font-weight: 400;
        color: rgba(26, 194, 121, 1);
    }

    .srk_box {
        width: 704rpx;
        // height: 262rpx;
        border-radius: 28rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        box-sizing: border-box;
        padding-top: 10rpx;
        margin-bottom: 20rpx;





        .lianxiren_box {
            width: 628rpx;
            height: 116rpx;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left_box {
                width: 150rpx;
                height: 46rpx;
                font-size: 32rpx;
                font-weight: 500;
                line-height: 46rpx;
                color: rgba(56, 56, 56, 1);

            }

            .right_box {
                width: 450rpx;
                height: 46rpx;
                text-align: right;
                font-size: 32rpx;
                font-weight: 500;
                line-height: 46rpx;

                input {
                    width: 100%;
                    height: 100%;
                    text-align: right;
                    font-size: 32rpx;
                    font-weight: 500;
                    line-height: 46rpx;
                    color: rgba(51, 51, 51, 1);
                }
            }

            .icon {
                width: 40rpx;
                height: 46rpx;
                line-height: 46rpx;
                text-align: right;

            }
        }
    }

    .tishiwenzi_box {
        width: 632rpx;
        font-size: 20rpx;
        font-weight: 400;
        letter-spacing: 0rpx;
        line-height: 28rpx;
        color: rgba(128, 128, 128, 1);
        margin: auto;
        margin-bottom: 74rpx;

    }

    .tijiao_box {
        width: 652rpx;
        height: 100rpx;
        opacity: 1;
        border-radius: 20rpx;
        background: rgba(26, 194, 121, 1);
        margin: auto;
        text-align: center;
        line-height: 100rpx;
        font-size: 36rpx;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        margin-bottom: 28rpx;

    }

    .xieyi_box {
        width: 652rpx;
        height: 24rpx;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 26rpx;
        font-weight: 400;
        line-height: 24rpx;
        color: rgba(123, 135, 135, 1);

        .icon_box {
            width: 24rpx;
            height: 24rpx;
            margin-right: 12rpx;

            image {
                width: 100%;
                height: 100%;
            }

        }
    }
}
</style>